<template>
  <div id="app">
    <router-view></router-view>
    <tabbar v-show="showBottomTab" @on-index-change="onTabChange" class="main-bottom-tab-bar icon-custom-size">
      <tabbar-item selected>
        <!-- <star-icon slot="icon"></star-icon> -->
        <img :src="require('./assets/images/tab/star.png')" alt="" slot="icon">
        <img :src="require('./assets/images/tab/star-active.png')" alt="" slot="icon-active">
        <span slot="label">精选</span>
      </tabbar-item>
      <tabbar-item>
        <!-- <library-video-icon slot="icon"></library-video-icon> -->
        <img :src="require('./assets/images/tab/gift.png')" alt="" slot="icon">
        <img :src="require('./assets/images/tab/gift-active.png')" alt="" slot="icon-active">
        <span slot="label">福利</span>
      </tabbar-item>
        <!-- <eye-circle-outline-icon slot="icon"></eye-circle-outline-icon> -->
      <!-- <tabbar-item>
        <img :src="require('./assets/images/tab/discover.png')" alt="" slot="icon">
        <img :src="require('./assets/images/tab/discover-active.png')" alt="" slot="icon-active">
        <span slot="label">发现</span>
      </tabbar-item> -->
      <tabbar-item>
        <!-- <apple-keyboard-command-icon slot="icon"></apple-keyboard-command-icon> -->
        <img :src="require('./assets/images/tab/assist.png')" alt="" slot="icon">
        <img :src="require('./assets/images/tab/assist-active.png')" alt="" slot="icon-active">
        <span slot="label">辅助</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import {mapActions} from 'vuex';
import {hero, ins, equip} from './requests'
export default {
  name: 'app',
  data: ()=>({
    //  
    routes: ['/home/heat', '/gift', '/assist'],
    showBottomTab: true
  }),
  mounted() {
    this.$nextTick(()=>{
      this.getDatasReady();
    });
    // console.log(hero)
  },
  watch:{
    '$route': function(n, o) {
      this.showBottomTab = !n.meta.hideTab;
    }
  },
  methods: {
    ...mapActions(['SET_HERO_LIST','SET_SKILL_LIST','SET_EQUIP_LIST','SET_INS_LIST','SET_WEEKFREE_LIST']),
    onTabChange(index) {
      this.$router.push(this.routes[index]);
    },
    //
    getDatasReady() {
      let hl = hero.getHeroList.r({}).then(({data})=>{
        if(data.result === 0) {
          let hero_list = data.data.dataList;
          let weekfree_list = [];
          this.SET_HERO_LIST(hero_list);
          hero_list.forEach((item)=>{
            if(item.isFree) {
              weekfree_list.push(item)
            }
          });
          console.log(weekfree_list)
          // weekfree_list = hero_list.slice(0, 7);
          this.SET_WEEKFREE_LIST(weekfree_list);
        } else {
          return Promise.reject(data.message);
        }
      });
      let sl = hero.getSkillList.r({}).then(({data})=>{
        if(data.result === 0) {
          this.SET_SKILL_LIST(data.data.dataList);
        } else {
          return Promise.reject(data.message);
        }
      });
      let el = equip.getEquipList.r({}).then(({data})=>{
        if(data.result === 0) {
          this.SET_EQUIP_LIST(data.data.dataList);
        } else {
          return Promise.reject(data.message);
        }
      });
      let il = ins.getInsList.r({}).then(({data})=>{
        if(data.result === 0) {
          let payload = data.data.dataList;
          let filter = ['insName', 'insType', 'id', 'insUrl']
          let newPayload = [];
          payload.forEach((item, i)=>{
            let newItem = {
              effects: {}
            };
            for(let key in item) {
              if(filter.indexOf(key) !== -1) {
                newItem[key] = item[key]
              }
              if(item[key] !== 0 && filter.indexOf(key) === -1) {
                newItem.effects[key] = item[key];
              }
            }
            newPayload.push(newItem);
          });
          this.SET_INS_LIST(newPayload);
        } else {
          return Promise.reject(data.message);
        }
      });

      let all = Promise.all([hl, sl, el, il]).then((res, rej)=>{
        console.log('信息全部加载完毕');
      }).catch(err=>{
        console.error('信息未能全部加载');
        return getDatasReady();
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/reset.less';

body {
  background-color: #fbf9fe;
}
.main-bottom-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>
